//获取文章的分类，将其渲染在页面上
$(function () {
  const form = layui.form
  const layer = layui.layer

  function getList() {
    $.ajax({
      type: 'GET',
      url: '/my/article/cates',
      success: function (res) {
        if (res.status !== 0) {
          return layer.msg('获取文章列表失败')
        }
        //成功进行渲染
        renderList(res.data)
      }
    })
  }

  getList()

  function renderList(data) {
    const str = data.map(item => {
      return `
      <tr>
        <td>${item.name}</td>
        <td>${item.alias}</td>
        <td>
          <button type="button" class="layui-btn layui-btn-xs btn-edit" data-id="${item.Id}">编辑</button>
          <button type="button" class="layui-btn layui-btn-danger layui-btn-xs btn-delete" data-id="${item.Id}">删除</button>
        </td>
      </tr>
      `
    }).join('')

    //将字符串渲染到页面中
    $('.layui-table tbody').html(str)
  }

  //点击添加类别，出现弹出层
  let indexAdd = null
  $('#btnAddCate').on('click', function () {
    indexAdd = layer.open({
      type: 1,
      area: ['500px', '250px'],
      title: '添加文章分类',
      content: $('#dialog-add').html()
    })
  })

  //新增文章的分类
  $('body').on('submit', '#form-add', function (e) {
    e.preventDefault()
    $.ajax({
      type: 'POST',
      url: '/my/article/addcates',
      data: $(this).serialize(),
      success: function (res) {
        console.log(res)
        if (res.status !== 0) {
          return layer.msg('新增分类失败')
        }
        layer.msg('新增分类成功')
        //成功渲染
        getList()
        layer.close(indexAdd)
      }
    })
  })

  //编辑科目
  var indexEdit = null
  $('tbody').on('click', '.btn-edit', function () {
    indexEdit = layer.open({
      type: 1,
      area: ['500px', '250px'],
      title: '添加文章分类',
      content: $('#dialog-edit').html()
    })
    //将内容渲染上去
    //重新获取请求---将内容渲染上去
    const id = $(this).attr('data-id')
    $.ajax({
      type: 'GET',
      url: '/my/article/cates/' + id,
      success: function (res) {
        if (res.status !== 0) {
          return layer.msg('获取文章列表失败')
        }
        //成功进行渲染
        form.val('form-edit', res.data)
      }
    })
  })

  //更新分类
  $('body').on('submit', '#form-edit', function (e) {
    e.preventDefault()
    $.ajax({
      type: 'POST',
      url: '/my/article/updatecate',
      data: $(this).serialize(),
      success: function (res) {
        console.log(res)
        if (res.status !== 0) {
          return layer.msg('更新文章列表失败')
        }
        //成功进行渲染
        getList()
        layer.close(indexEdit)
      }
    })
  })
  //删除分类
  $('tbody').on('click', '.btn-delete', function () {
    const id = $(this).attr('data-id')
    $.ajax({
      type: 'GET',
      url: '/my/article/deletecate/' + id,
      success: function (res) {
        console.log(res)
        if (res.status !== 0) {
          return layer.msg('更新文章列表失败')
        }
        //成功进行渲染
        getList()
      }
    })
  })

})



